// 类：项目编辑页面逻辑（基础信息、成员管理、区域绑定）
// 方法：初始化、表单验证、成员管理、区域绑定、数据保存

layui.use(['layer', 'form', 'laydate', 'dropdown'], function () {
    var layer = layui.layer;
    var form = layui.form;
    var laydate = layui.laydate;
    var dropdown = layui.dropdown;

    // 页面数据
    var pageData = {
        projectId: null, // 项目ID，null表示新增
        members: [], // 项目成员列表
        regions: [], // 绑定区域列表
        users: [] // 用户列表（用于选择现有用户）
    };

    // 初始化页面
    function initPage() {
        // 初始化日期选择器
        initDatePickers();
        
        // 初始化事件监听
        initEventListeners();
        
        // 加载用户数据
        loadUsers();
        
        // 如果是编辑模式，加载项目数据
        var urlParams = new URLSearchParams(window.location.search);
        var projectId = urlParams.get('id');
        if (projectId) {
            pageData.projectId = projectId;
            loadProjectData(projectId);
        }
    }

    // 初始化日期选择器
    function initDatePickers() {
        laydate.render({
            elem: '#joinDate',
            type: 'date',
            format: 'yyyy-MM-dd'
        });
        
        laydate.render({
            elem: '#bindDate',
            type: 'date',
            format: 'yyyy-MM-dd'
        });
    }

    // 初始化事件监听
    function initEventListeners() {
        // 返回按钮
        document.getElementById('btnBack').addEventListener('click', function() {
            if (confirm('确定要离开吗？未保存的数据将丢失。')) {
                // 返回到项目列表页面
                window.location.href = './service_project_areadown.html';
            }
        });

        // 取消按钮
        document.getElementById('btnCancel').addEventListener('click', function() {
            if (confirm('确定要取消吗？未保存的数据将丢失。')) {
                // 返回到项目列表页面
                window.location.href = './service_project_areadown.html';
            }
        });

        // 保存按钮
        document.getElementById('btnSave').addEventListener('click', function() {
            saveProject();
        });

        // 添加成员按钮
        document.getElementById('btnAddMember').addEventListener('click', function() {
            openMemberForm();
        });

        // 绑定区域按钮
        document.getElementById('btnBindRegion').addEventListener('click', function() {
            openRegionForm();
        });

        // 成员类型切换
        form.on('radio(memberType)', function(data) {
            var existingSection = document.getElementById('existingUserSection');
            var newSection = document.getElementById('newUserSection');
            
            if (data.value === 'existing') {
                existingSection.style.display = 'block';
                newSection.style.display = 'none';
            } else {
                existingSection.style.display = 'none';
                newSection.style.display = 'block';
            }
        });
    }

    // 加载用户数据
    function loadUsers() {
        // 模拟用户数据，实际应从API获取
        pageData.users = [
            { id: 1, name: '张三', username: 'zhangsan' },
            { id: 2, name: '李四', username: 'lisi' },
            { id: 3, name: '王五', username: 'wangwu' },
            { id: 4, name: '赵六', username: 'zhaoliu' },
            { id: 5, name: '钱七', username: 'qianqi' }
        ];
    }

    // 加载项目数据（编辑模式）
    function loadProjectData(projectId) {
        // 模拟项目数据，实际应从API获取
        var projectData = {
            id: projectId,
            projectName: '智慧城市建设项目',
            projectShortName: '智慧城市',
            region: '华东区域',
            serviceArea: '上海市浦东新区',
            contractName: '智慧城市一期建设合同',
            projectStatus: 'active',
            projectDescription: '这是一个智慧城市建设项目，包含多个子系统。'
        };

        // 填充表单数据
        form.val('projectBasicForm', projectData);

        // 模拟成员数据
        pageData.members = [
            { id: 1, userId: 1, userName: '张三', projectRole: 'manager', joinDate: '2024-01-01' },
            { id: 2, userId: 2, userName: '李四', projectRole: 'developer', joinDate: '2024-01-15' },
            { id: 3, userId: 3, userName: '王五', projectRole: 'tester', joinDate: '2024-02-01' }
        ];

        // 模拟区域数据
        pageData.regions = [
            { id: 1, regionType: 'intersection', regionName: '人民路与解放路交叉口', regionCode: 'RM001', bindDate: '2024-01-01' },
            { id: 2, regionType: 'road', regionName: '中山大道', regionCode: 'ZS001', bindDate: '2024-01-15' }
        ];

        // 渲染成员和区域列表
        renderMemberList();
        renderRegionList();
    }

    // 打开成员表单
    function openMemberForm() {
        var content = document.getElementById('tplMemberForm').innerHTML;
        
        layer.open({
            type: 1,
            title: '添加项目成员',
            area: '500px',
            content: content,
            btn: ['保存', '取消'],
            success: function(layero, index) {
                // 填充用户选项
                var userSelect = layero.find('select[name="userId"]')[0];
                userSelect.innerHTML = '<option value="">请选择用户</option>';
                pageData.users.forEach(function(user) {
                    var option = document.createElement('option');
                    option.value = user.id;
                    option.textContent = user.name + ' (' + user.username + ')';
                    userSelect.appendChild(option);
                });
                
                // 重新渲染表单
                form.render();
            },
            yes: function(index, layero) {
                var formData = form.val('memberForm');
                
                // 表单验证
                if (!formData.projectRole) {
                    layer.msg('请选择项目角色');
                    return;
                }
                
                if (formData.memberType === 'existing' && !formData.userId) {
                    layer.msg('请选择用户');
                    return;
                }
                
                if (formData.memberType === 'new' && !formData.userName) {
                    layer.msg('请输入用户姓名');
                    return;
                }

                // 添加成员到列表
                var member = {
                    id: Date.now(), // 临时ID
                    userId: formData.userId || null,
                    userName: formData.memberType === 'existing' ? 
                        pageData.users.find(u => u.id == formData.userId).name : 
                        formData.userName,
                    projectRole: formData.projectRole,
                    joinDate: formData.joinDate || new Date().toISOString().split('T')[0]
                };
                
                pageData.members.push(member);
                renderMemberList();
                layer.close(index);
                layer.msg('成员添加成功');
            }
        });
    }

    // 打开区域绑定表单
    function openRegionForm() {
        var content = document.getElementById('tplRegionForm').innerHTML;
        
        layer.open({
            type: 1,
            title: '绑定路口区域',
            area: '500px',
            content: content,
            btn: ['保存', '取消'],
            success: function(layero, index) {
                form.render();
            },
            yes: function(index, layero) {
                var formData = form.val('regionForm');
                
                // 表单验证
                if (!formData.regionType || !formData.regionName) {
                    layer.msg('请完善必填信息');
                    return;
                }

                // 添加区域到列表
                var region = {
                    id: Date.now(), // 临时ID
                    regionType: formData.regionType,
                    regionName: formData.regionName,
                    regionCode: formData.regionCode || '',
                    bindDate: formData.bindDate || new Date().toISOString().split('T')[0]
                };
                
                pageData.regions.push(region);
                renderRegionList();
                layer.close(index);
                layer.msg('区域绑定成功');
            }
        });
    }

    // 渲染成员列表
    function renderMemberList() {
        var memberList = document.getElementById('memberList');
        
        if (pageData.members.length === 0) {
            memberList.innerHTML = `
                <div class="layui-empty">
                    <div class="layui-empty-icon">
                        <i class="layui-icon layui-icon-user"></i>
                    </div>
                    <p class="layui-empty-text">暂无项目成员</p>
                </div>
            `;
            return;
        }

        var html = '<table class="layui-table" lay-skin="line">';
        html += '<thead><tr><th>姓名</th><th>角色</th><th>加入时间</th><th>操作</th></tr></thead>';
        html += '<tbody>';
        
        pageData.members.forEach(function(member) {
            var roleText = getRoleText(member.projectRole);
            html += `
                <tr>
                    <td>${member.userName}</td>
                    <td><span class="layui-badge layui-bg-blue">${roleText}</span></td>
                    <td>${member.joinDate}</td>
                    <td>
                        <button class="layui-btn layui-btn-xs layui-btn-primary" onclick="editMember(${member.id})">编辑</button>
                        <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="removeMember(${member.id})">移除</button>
                    </td>
                </tr>
            `;
        });
        
        html += '</tbody></table>';
        memberList.innerHTML = html;
    }

    // 渲染区域列表
    function renderRegionList() {
        var regionList = document.getElementById('regionList');
        
        if (pageData.regions.length === 0) {
            regionList.innerHTML = `
                <div class="layui-empty">
                    <div class="layui-empty-icon">
                        <i class="layui-icon layui-icon-location"></i>
                    </div>
                    <p class="layui-empty-text">暂无绑定区域</p>
                </div>
            `;
            return;
        }

        var html = '<table class="layui-table" lay-skin="line">';
        html += '<thead><tr><th>区域名称</th><th>区域类型</th><th>区域代码</th><th>绑定时间</th><th>操作</th></tr></thead>';
        html += '<tbody>';
        
        pageData.regions.forEach(function(region) {
            var typeText = getRegionTypeText(region.regionType);
            var typeClass = getRegionTypeClass(region.regionType);
            html += `
                <tr>
                    <td>${region.regionName}</td>
                    <td><span class="layui-badge ${typeClass}">${typeText}</span></td>
                    <td>${region.regionCode || '-'}</td>
                    <td>${region.bindDate}</td>
                    <td>
                        <button class="layui-btn layui-btn-xs layui-btn-primary" onclick="editRegion(${region.id})">编辑</button>
                        <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="removeRegion(${region.id})">解绑</button>
                    </td>
                </tr>
            `;
        });
        
        html += '</tbody></table>';
        regionList.innerHTML = html;
    }

    // 获取角色文本
    function getRoleText(role) {
        var roleMap = {
            'manager': '项目经理',
            'developer': '开发人员',
            'tester': '测试人员',
            'designer': '设计师',
            'analyst': '分析师'
        };
        return roleMap[role] || role;
    }

    // 获取区域类型文本
    function getRegionTypeText(type) {
        var typeMap = {
            'intersection': '路口',
            'road': '道路',
            'area': '区域'
        };
        return typeMap[type] || type;
    }

    // 获取区域类型样式类
    function getRegionTypeClass(type) {
        var classMap = {
            'intersection': 'layui-bg-orange',
            'road': 'layui-bg-green',
            'area': 'layui-bg-blue'
        };
        return classMap[type] || 'layui-bg-gray';
    }

    // 编辑成员
    window.editMember = function(memberId) {
        var member = pageData.members.find(m => m.id === memberId);
        if (!member) return;
        
        // 这里可以实现编辑成员的逻辑
        layer.msg('编辑成员功能待实现');
    };

    // 移除成员
    window.removeMember = function(memberId) {
        layer.confirm('确定要移除该成员吗？', { icon: 3, title: '确认移除' }, function(index) {
            pageData.members = pageData.members.filter(m => m.id !== memberId);
            renderMemberList();
            layer.close(index);
            layer.msg('成员移除成功');
        });
    };

    // 编辑区域
    window.editRegion = function(regionId) {
        var region = pageData.regions.find(r => r.id === regionId);
        if (!region) return;
        
        // 这里可以实现编辑区域的逻辑
        layer.msg('编辑区域功能待实现');
    };

    // 移除区域
    window.removeRegion = function(regionId) {
        layer.confirm('确定要解绑该区域吗？', { icon: 3, title: '确认解绑' }, function(index) {
            pageData.regions = pageData.regions.filter(r => r.id !== regionId);
            renderRegionList();
            layer.close(index);
            layer.msg('区域解绑成功');
        });
    };

    // 保存项目
    function saveProject() {
        // 验证基础表单
        var basicFormData = form.val('projectBasicForm');
        
        if (!basicFormData.projectName || !basicFormData.region) {
            layer.msg('请完善必填信息');
            return;
        }

        // 构建完整项目数据
        var projectData = {
            ...basicFormData,
            members: pageData.members,
            regions: pageData.regions
        };

        // 显示加载状态
        var loadingIndex = layer.load(1, { shade: [0.3, '#000'] });

        // 模拟保存请求
        setTimeout(function() {
            layer.close(loadingIndex);
            layer.msg('项目保存成功', { icon: 1 }, function() {
                // 保存成功后返回到项目列表页面
                window.location.href = './service_project_areadown.html';
            });
        }, 1000);

        console.log('保存项目数据:', projectData);
    }

    // 页面加载完成后初始化
    initPage();
});
